<template>
    <div class="login_container">
<!--      登录框-->
      <div class="login_box">
<!--        logo-->
        <div class="logo"><img src="../assets/img/LOGO.png" alt=""></div>
<!--        文本-->
        <p class="text">欢迎使用本系统</p>
<!--        表单-->
        <el-form label-width="0" class="login_form" :model="login_form" :rules="loginRules">
<!--          用户名-->
          <el-form-item prop="username">
            <el-input  v-model="login_form.username" placeholder="用户名：" clearable></el-input>
          </el-form-item>

          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input class="password" v-model="login_form.password" placeholder="密码：" clearable></el-input>
          </el-form-item>

          <div class="forget"><a href="">忘记密码？</a></div>
          <div style="clear: both"></div>
          <!-- 按钮 -->
          <el-form-item class="btns">
            <button  class="btn">登录</button>
          </el-form-item>

        </el-form>
      </div>

    </div>


</template>

<script>
  export default {
    data(){
      return{
        // 表单数据绑定
        login_form:{username:'',password:''},
        // 验证规则
        loginRules : {
          username : [{ required: true, message: "请输入用户名", trigger: "blur" }, // blur：失去焦点触发
            { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }],

          password: [ { required: true, message: "请输入密码", trigger: "blur" },
            { min: 6, max: 12, message: "长度在 6 到 12 个字符", trigger: "blur" }]
        },

      }
    }
  }
</script>
<style>
/* 输入框 */
  .login_form .el-input__inner{
    /* width: 100%; */
    border-radius: 40px;
    height: 80px;
    /*line-height: 80px;*/
    box-shadow: 1px 1px 29px 0px rgba(4, 0, 0, 0.18);
    padding: 0 30px;
    font-size: 20px;
    color: #333;
    font-family: 'din-medium';
    /* margin-top: 40px; */
  }
   .login_form .el-input__suffix-inner {
      border-color: none; 
    }
  .login_form  .el-icon-circle-close:before {
        content: "\e79d" !important;
        font-size: 25px;
        margin-left: -25px;
        line-height: 85px;
  }

  /* 验证提示消息 */
  .login_form .el-form-item__error{
  padding-left:80px;
}
 .login_form .el-form-item__content{
  margin-top:40px;
}
.login_form .el-form-item{
  margin-bottom: 0;
}
</style>

<style scoped>
  *{
    margin:0;
    padding: 0;
    list-style: none;
    text-decoration: none;
  }
  .login_container {
    height: 100%;
    background:url("../assets/img/bg.jpg") no-repeat center ;
  }
  /* 外层盒子 */
  .login_box{
    width: 545px;
    height: 642px;
    background-color: #ffffff;
    box-shadow: 1px 1px 29px 0px rgba(4, 0, 0, 0.18);
    border-radius: 20px;
    margin: 130px auto 0;
    box-sizing: border-box;
  }
  .logo{
     width: 100%;
    text-align: center;
  }
  .logo>img{
    margin-top: 40px;
    margin-bottom: 24px;
  }
  .text{
    text-align: center;
    font-size: 21px;
    color: #333;
    font-family:'Microsoft Yahei' ;
    /* margin-bottom: 38px; */
  }
  /* 表单区域 */
  .login_form {
    width: 100%;
    text-align: center;
    /* padding:0 20px; */
  }
  .login_form  .el-input{
    box-shadow: 1px 1px 29px 0px rgba(4, 0, 0, 0.18);
    width: 420px;
    height: 80px;
    border-radius: 40px!important;
  }

  button:focus{outline: none}

  .btn{
    width: 300px;
    height: 60px;
    border-radius: 30px;
    font-size: 20px;
    font-family: 'Microsoft Yahei';
    color: #fff;
    letter-spacing: 4px;
    background: #5bcaff;
    /* margin-top: 50px; */
    /*border: none;*/
  }
  .forget>a{
    float:right;
    font-size: 20px;
    font-family: 'Microsoft Yahei';
    color: #999;
    margin-right: 55px;
    margin-top: 20px;
  }

</style>
